<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>郑时_201901154</title>
</head>
<style>
    body{
        background: url("http://m.qpic.cn/psc?/V50fxVrq3y1pqu3S4nYe2xracL1W6hXB/45NBuzDIW489QBoVep5mceHbOJWMUoo.HyGUpZ1iB06mpzBBsA4JQVRrNyd9aR3zCKkQ.Wnqklzh2qYvaloJwzilfoybNj2cNWwmk16F5yE!/b&bo=IAPCAQAAAAABF9A!&rf=viewer_4") no-repeat;
        background-size:100%;
    }
    #view{
        width:600px;
        height:500px;
        background: #181818;
        color: #2c3e50;
        box-shadow: 0 0 10px 10px rgba(92, 92, 92, 0.1);
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);/* 平移，参考自己的位置来平移 */
        border-radius:8px;
        opacity: 0.85;
    }
    button{
        width:90px;
        height:28px;
        border-radius:3px;
        position: absolute;
        left:50%;
        background-color: #1e3d3d;
        color: cornsilk;
    }
    b{
        background: #c0cece;
        width:480px;
        height:250px;
        position: absolute;
        top:40%;
        left:10%;
        opacity: 0.85;
        border-radius:8px;
    }
    .view1{
        width:480px;
        height:250px;
        position: absolute;
        top:6%;
        left:20%;
        border-radius:8px;
    }
    p{
        color: cornsilk;
    }
</style>
<script>
    function onbutton_studentId(){
        var xmlhttp =null;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        if(xmlhttp!=null){
            xmlhttp.onreadystatechange=function (){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById('value').innerHTML=xmlhttp.responseText;
                }
            };
            /*true：异步，false：同步*/
            xmlhttp.open("GET","https://html.ftmc.me/obtain/?studentId="+document.getElementById("studentId").value,true);
            xmlhttp.send(null);
        }
    }
    function onbutton_ordinal(){
        var xmlhttp =null;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        if(xmlhttp!=null){
            xmlhttp.onreadystatechange=function (){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById('value').innerHTML=xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","https://html.ftmc.me/obtain/?studentId="+document.getElementById("studentId").value
                +"&ordinal="+document.getElementById("ordinal").value,true);
            xmlhttp.send(null);
        }
    }
    function onbutton_answer(){
        var xmlhttp =null;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        if(xmlhttp!=null){
            xmlhttp.onreadystatechange=function (){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById('value').innerHTML=xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","https://html.ftmc.me/submit/?studentId="+document.getElementById("studentId").value
                +"&ordinal="+document.getElementById("ordinal").value
                +"&answer="+document.getElementById("answer").value,true);
            xmlhttp.send(null);
        }
    }
</script>
<body>
<div>
    <div id="view">
        <div class="view1">
            <p>学&ensp;号:&ensp;<input type="text" id="studentId"/>
            <button type="button" onclick="onbutton_studentId()">抽题</button></p>
            <p>题&ensp;号:&ensp;<input type="text" id="ordinal"/>
            <button type="button" onclick="onbutton_ordinal()">获取题目</button></p>
            <p>答&ensp;案:&ensp;<input type="text" id="answer"/>
            <button type="button" onclick="onbutton_answer()">答题</button></p>
        </div>
        <b id="value"></b>
    </div>
</div>
</body>
</html>